<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin: 0;
        }


        #box3{
            width: 100%;
            height: 100px;
            background: #333;
        }

        #box4{
            min-height: 3000px;
            background: pink;
        }
    </style>
</head>
<body>
    <!--  
        1. 框架事件
            onload      当页面or图片加载成功时触发
            onresize    当页面大小发生改变时触发
            onerror     当页面or图片加载失败时触发
            onscroll    当页面发生滚动时触发
                

        2. 获取当前滚动条距离顶部的距离
            apple:window.pageYOffset
            IE: document.body.scrollTop
            其余:document.documentElement.scrollTop

    -->

    <script>
        // 当页面加载完成后, 再执行函数
        window.onload = function(){
            var box = document.getElementById('box');
            console.log(box);
        }
    </script>
    <div id="box"></div>


    <script>
        window.onresize = function(){
            var r = Math.round(Math.random() * 255);
            var g = Math.round(Math.random() * 255);
            var b = Math.round(Math.random() * 255);
            document.body.style.backgroundColor = `rgb(${r} , ${g}, ${b})`;
        }
    </script>


    <div id="box2">
        <img src="./img/1.jpg" height="200">
        <img src="./img/2.jpg" height="200">
        <img src="./img/30.jpg" height="200">
        <img src="./img/4.jpg" height="200">
        <img src="./img/50.jpg" height="200">
    </div>
    <script>
        var img = document.getElementsByTagName('img');

        for(var i = 0; i < img.length; i++){
            img[i].onerror = function(){
                this.src = './img/error.jpg';
            }
        }
    </script>


    <div id="box3"></div>
    <div id="box4">
        
    </div>
    <script>
        // 为box4 内部填充内容
        var box4 = document.getElementById('box4');
        var str = '';
        for(var i = 1; i < 5000; i++){
            str += (i+'<br>');
        }
        box4.innerHTML = str;


        var box3 = document.getElementById('box3');
        window.onscroll = function(){
            var top = document.documentElement.scrollTop || 
                       document.body.scrollTop ||
                       window.pageYOffset;

            console.log(top);

            if( top >= 201 ){
                box3.style.position = 'fixed';
                box3.style.top = '0px';
                box3.style.left = '0px';
            }else{
                box3.style.position = 'static';
            }

        }




    </script>



    
</body>
</html>